<template>
    <div class="container">
      <van-nav-bar z-index fixed placeholder @click-left="$router.back()" title="选择城市" left-text="关闭" >
        </van-nav-bar>
        <van-search
        autofocus
         v-model="CityKey" placeholder="输入城市名或者拼音" />
        <div v-if="!CityKey">
                  <div class="heastor">
          <van-row style="margin-bottom:10px;margin-left:10px">
            <van-col style="margin-top:10px;font-size:13px">
              历史访问城市
            </van-col>
          </van-row>
            <van-grid :column-num="3" :gutter="10">
          <van-grid-item @click="handleClick" :class="{ 'first-item': index === 0 }" v-for="(ele,index) in historyCity " :key="ele"  :text="ele" />
        </van-grid>

        <van-row style="margin-bottom:10px;margin-left:10px">
              <van-col style="margin-top:10px; font-size:13px">
                <span>热门城市</span>
              </van-col>
        </van-row>
        <van-grid :column-num="3" :gutter="10">
          <van-grid-item @click="handleClick" :class="{ 'first-item': value ===city_temp }" v-for="value in cityList" :key="value"  :text="value" />
        </van-grid>
                 </div>

                 <van-index-bar :sticky="false">
          <van-index-anchor style="background-color: #f3f3f3" index="A" />
          <van-cell @click="handleClick($event)" title="阿坝" />
          <van-cell @click="handleClick($event)" title="阿拉善" />
          <van-cell @click="handleClick($event)" title="阿勒泰" />
          <van-cell @click="handleClick($event)" title="鞍山" />
          <van-cell @click="handleClick($event)" title="安阳" />
          <van-index-anchor  style="background-color: #f3f3f3" index="B" />
          <van-cell @click="handleClick($event)" title="白城" />
          <van-cell @click="handleClick($event)" title="宝鸡" />
          <van-cell @click="handleClick($event)" title="宝山" />
          <van-cell @click="handleClick($event)" title="包头" />
          <van-cell @click="handleClick($event)" title="北京" />
          <van-cell @click="handleClick($event)" title="毕节" />
          <van-cell @click="handleClick($event)" title="滨州" />
           <van-index-anchor  style="background-color: #f3f3f3" index="C" />
          <van-cell @click="handleClick($event)" title="长春" />
          <van-cell @click="handleClick($event)" title="长沙" />
          <van-cell @click="handleClick($event)" title="常州" />
          <van-cell @click="handleClick($event)" title="成都" />
          <van-cell @click="handleClick($event)" title="重庆" />
          <van-cell @click="handleClick($event)" title="滁州" />
          <van-index-anchor  style="background-color: #f3f3f3" index="D" />
          <van-cell @click="handleClick($event)" title="大理" />
          <van-cell @click="handleClick($event)" title="大连" />
          <van-cell @click="handleClick($event)" title="大同" />
          <van-cell @click="handleClick($event)" title="达州" />
          <van-cell @click="handleClick($event)" title="德阳" />
          <van-cell @click="handleClick($event)" title="东莞" />
          <van-index-anchor style="background-color: #f3f3f3" index="E" />
          <van-cell @click="handleClick($event)" title="鄂尔多斯" />
          <van-cell @click="handleClick($event)" title="恩施" />
          <van-index-anchor style="background-color: #f3f3f3" index="F" />
          <van-cell @click="handleClick($event)" title="防城港" />
          <van-cell @click="handleClick($event)" title="抚顺" />
          <van-cell @click="handleClick($event)"  title="福山" />
          <van-cell @click="handleClick($event)" title="福州" />
          <van-index-anchor style="background-color: #f3f3f3" index="G" />
          <van-cell @click="handleClick($event)" title="甘南" />
          <van-cell @click="handleClick($event)" title="赣州" />
          <van-cell @click="handleClick($event)" title="甘孜" />
          <van-cell @click="handleClick($event)" title="广安" />
          <van-cell @click="handleClick($event)" title="广元" />
          <van-cell @click="handleClick($event)" title="广州" />
          <van-cell @click="handleClick($event)" title="贵阳" />
          <van-cell @click="handleClick($event)" title="桂林" />
           <van-index-anchor style="background-color: #f3f3f3" index="H" />
          <van-cell @click="handleClick($event)" title="哈尔滨" />
          <van-cell @click="handleClick($event)" title="海北" />
          <van-cell @click="handleClick($event)" title="海东" />
          <van-cell @click="handleClick($event)" title="海口" />
          <van-cell @click="handleClick($event)" title="哈密" />
          <van-cell @click="handleClick($event)" title="杭州" />
          <van-cell @click="handleClick($event)" title="邯郸" />
          <van-cell @click="handleClick($event)" title="汉中" />
          <van-cell @click="handleClick($event)" title="合肥" />
          <van-cell @click="handleClick($event)" title="红河" />
          <van-cell @click="handleClick($event)" title="黄山" />
          <van-cell @click="handleClick($event)" title="呼和浩特" />
           <van-index-anchor style="background-color: #f3f3f3" index="J" />
          <van-cell @click="handleClick($event)" title="佳木斯" />
          <van-cell @click="handleClick($event)" title="吉安" />
          <van-cell @click="handleClick($event)" title="焦作" />
          <van-cell @click="handleClick($event)" title="嘉峪关" />
          <van-cell @click="handleClick($event)" title="揭阳" />
          <van-cell @click="handleClick($event)" title="吉林" />
          <van-cell @click="handleClick($event)" title="济南" />
          <van-cell @click="handleClick($event)" title="荆州" />
          <van-cell @click="handleClick($event)" title="金华" />
          <van-cell @click="handleClick($event)" title="酒泉" />
          <van-cell @click="handleClick($event)" title="济源" />
          <van-cell @click="handleClick($event)" title="鸡西" />
            <van-index-anchor style="background-color: #f3f3f3" index="K" />
          <van-cell @click="handleClick($event)" title="开封" />
          <van-cell @click="handleClick($event)" title="喀什" />
          <van-cell @click="handleClick($event)" title="克拉玛依" />
          <van-cell @click="handleClick($event)" title="昆明" />
           <van-index-anchor style="background-color: #f3f3f3" index="L" />
          <van-cell @click="handleClick($event)" title="乐山" />
          <van-cell @click="handleClick($event)" title="兰州" />
          <van-cell @click="handleClick($event)" title="拉萨" />
          <van-cell @click="handleClick($event)" title="乐东" />
          <van-cell @click="handleClick($event)" title="凉山" />
          <van-cell @click="handleClick($event)" title="连云港" />
          <van-cell @click="handleClick($event)" title="辽阳" />
          <van-cell @click="handleClick($event)" title="辽源" />
          <van-cell @click="handleClick($event)" title="丽江" />
          <van-cell @click="handleClick($event)" title="临汾" />
          <van-cell @click="handleClick($event)" title="林芝" />
          <van-cell @click="handleClick($event)" title="丽水" />
            <van-index-anchor style="background-color: #f3f3f3" index="M" />
          <van-cell @click="handleClick($event)" title="眉山" />
          <van-cell @click="handleClick($event)" title="梅州" />
          <van-cell @click="handleClick($event)" title="绵阳" />
          <van-cell @click="handleClick($event)" title="牡丹江" />
           <van-index-anchor style="background-color: #f3f3f3" index="N" />
          <van-cell @click="handleClick($event)" title="南昌" />
          <van-cell @click="handleClick($event)" title="南京" />
          <van-cell @click="handleClick($event)" title="南宁" />
          <van-index-anchor style="background-color: #f3f3f3" index="P" />
          <van-cell @click="handleClick($event)" title="攀枝花" />
          <van-cell @click="handleClick($event)" title="平顶山" />
          <van-cell @click="handleClick($event)" title="莆田" />
          <van-index-anchor style="background-color: #f3f3f3" index="Q" />
          <van-cell @click="handleClick($event)" title="黔东南" />
          <van-cell @click="handleClick($event)" title="青岛" />
          <van-cell @click="handleClick($event)" title="秦皇岛" />
          <van-cell @click="handleClick($event)" title="琼海" />
          <van-cell @click="handleClick($event)" title="泉州" />
          <van-cell @click="handleClick($event)" title="齐齐哈尔" />
          <van-cell @click="handleClick($event)" title="衢州" />
          <van-index-anchor style="background-color: #f3f3f3" index="R" />
          <van-cell @click="handleClick($event)" title="日喀则" />
          <van-cell @click="handleClick($event)" title="日照" />
            <van-index-anchor style="background-color: #f3f3f3" index="S" />
          <van-cell @click="handleClick($event)" title="三门峡" />
          <van-cell @click="handleClick($event)" title="上海" />
          <van-cell @click="handleClick($event)" title="沈阳" />
          <van-cell @click="handleClick($event)" title="深圳" />
          <van-cell @click="handleClick($event)" title="苏州" />
          <van-cell @click="handleClick($event)" title="宿迁" />
          <van-cell @click="handleClick($event)" title="绍兴" />
          <van-cell @click="handleClick($event)" title="遂宁" />
          <van-cell @click="handleClick($event)" title="商丘" />
          <van-cell @click="handleClick($event)" title="石家庄" />
          <van-cell @click="handleClick($event)" title="汕头" />
          <van-cell @click="handleClick($event)" title="汕尾" />
          <van-cell @click="handleClick($event)" title="韶关" />
            <van-index-anchor style="background-color: #f3f3f3" index="T" />
          <van-cell @click="handleClick($event)" title="塔城" />
          <van-cell @click="handleClick($event)" title="台州" />
          <van-cell @click="handleClick($event)" title="唐山" />
          <van-cell @click="handleClick($event)" title="天津" />
          <van-cell @click="handleClick($event)" title="通辽" />
          <van-cell @click="handleClick($event)" title="铜陵" />
          <van-cell @click="handleClick($event)" title="铜仁" />
            <van-index-anchor style="background-color: #f3f3f3" index="W" />
          <van-cell @click="handleClick($event)" title="万宁" />
          <van-cell @click="handleClick($event)" title="潍坊" />
          <van-cell @click="handleClick($event)" title="温州" />
          <van-cell @click="handleClick($event)" title="乌鲁木齐" />
          <van-cell @click="handleClick($event)" title="无锡" />
          <van-cell @click="handleClick($event)" title="梧州" />
          <van-cell @click="handleClick($event)" title="武汉" />
  <van-index-anchor style="background-color: #f3f3f3" index="X" />
          <van-cell @click="handleClick($event)" title="厦门" />
          <van-cell @click="handleClick($event)" title="西宁" />
          <van-cell @click="handleClick($event)" title="西安" />
          <van-cell @click="handleClick($event)" title="许昌" />
          <van-cell @click="handleClick($event)" title="徐州" />
          <van-cell @click="handleClick($event)" title="宣城" />
          <van-cell @click="handleClick($event)" title="孝感" />
          <van-cell @click="handleClick($event)" title="新乡" />
          <van-cell @click="handleClick($event)" title="信阳" />
          <van-cell @click="handleClick($event)" title="忻州" />
            <van-index-anchor style="background-color: #f3f3f3" index="Y" />
          <van-cell @click="handleClick($event)" title="雅安" />
          <van-cell @click="handleClick($event)" title="盐城" />
          <van-cell @click="handleClick($event)" title="扬州" />
          <van-cell @click="handleClick($event)" title="宜宾" />
          <van-cell @click="handleClick($event)" title="宜昌" />
            <van-index-anchor style="background-color: #f3f3f3" index="Z" />
          <van-cell @click="handleClick($event)" title="枣庄" />
          <van-cell @click="handleClick($event)" title="张家口" />
          <van-cell @click="handleClick($event)" title="张家界" />
          <van-cell @click="handleClick($event)" title="漳州" />

                 </van-index-bar>

        </div>
           <van-empty v-else image="error" description="抱歉，当前功能并未开发" />
    </div>
</template>

<script>
import { getInfoCity, setInfoCity } from '@/utils/auth'
// import { mapGetters } from 'vuex'
export default {
  name: 'CityPage',
  data () {
    return {
      // 热门城市
      cityList: ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '南京', '西安', '厦门'],
      CityKey: '', // 城市名
      historyCity: getInfoCity(), // 历史访问城市
      city_temp: ''
    }
  },
  created () {
    this.city_temp = getInfoCity()[0]
  },
  methods: {
    // 历史访问城市
    handleClick (e) {
      const CityWord = e.target.innerText
      // 增加到历史访问城市去
      const index = this.historyCity.indexOf(CityWord)
      if (index !== -1) {
        this.historyCity.splice(index, 1)
      }
      if (e.target.innerText !== '') { this.historyCity.unshift(e.target.innerText) }
      setInfoCity(this.historyCity)
      this.$router.back()
    }
  }

}
</script>

<style lang="less" scoped>
.van-search {
  position: fixed;
  width: 100%;
  top: 46px;
  z-index: 999;
}
.heastor{
  margin-top: 50px;
  background-color: #f3f3f3;
  padding-bottom: 20px;
}
  ::v-deep .van-grid-item__content{
  padding: 8px 10px;
 }

 .first-item {
   ::v-deep .van-grid-item__content--center{
      border: 1px solid #f15050; /* 你可以根据需要添加样式 */
      span{
        color: red;
      }
   }
}
</style>
